HTMLメールを用いたメルマガ作りには、ある程度知識が必要です。学習しようとしても、よく意味がわからず、頭を抱えていませんか。

この記事では、HTMLメールの基本を初心者の方でもわかりやすいように解説します。

プログラミングのスキル不要、ノーコードでHTMLメール作れるツールもご紹介しますので、ぜひ最後まで読んで参考にしてみてください。

■合わせてよく読まれている資料：効果的なメールの書き方や送り方をまとめました！→成約につなげるためのメールマーケティングの基礎

目次[非表示]

HTMLメールとは、Webページを構築するためのプログラミングコード「HTML言語」を使い作成するメールです。「HTML」はメールの枠組みや、レイアウトを構成する役割を持ちます。

一般的に使用されるテキストメールと違い、Webサイトのように装飾されたメールを想像するとわかりやすいのではないでしょうか。

【参考】弊社「ferret One」で過去送信したHTMLメールのキャプチャ（一部抜粋）

※こちらの記事で、HTMLメールの作成例を複数ご紹介しています。【例文あり】BtoBメルマガ担当者に聞く！おすすめ配信コンテンツ６選

以下、HTMLメールにはどのような特徴があるのか、代表的なものを2つ紹介します。

メルマガユーザーを対象に、効果測定が行える点がHTMLメールの大きな特徴です。

メール内に挿入した画像の表示回数で解る「開封率」では、ユーザーが有益性を感じている内容やコンテンツを見定められます。

また、「ABテスト」などの分析では、メルマガをよりよく運用するための構成などの検証が可能です。

Google Analytics（GoogleのWebサイト分析ツール）を使用することでわかる「自社Webサイトにどう訪れたか、どう閲覧して回ったか」などに加えて、より詳細なユーザー分析ができるでしょう。

プログラミングコード「CSS」（テキストの色やフォントを変更したり、画像やページのレイアウトを整えるコード）を使うことで、デザイン性の高いメルマガを作れるのも、HTMLメールの特徴です。

EC市場の売上上位50社を対象に、メルマガ形式の調査をしたところ、92.7％がHTML形式でメール配信を行っていましたというデータもあります。（2021年時点）

参照：メルマガ調査レポート 2021年版【EC売上ランキング上位50】

Webサイトのような画像や装飾されたテキストは、ユーザーの目を引くことができます。インパクトのある見た目で行う情報提供で、リンクボタンのクリック率アップも目指せるでしょう。

メールは、メーラー（メール閲覧するためのソフト）や、Webメールを介して閲覧する仕組みになっています。

各メーラーでは、適応しているCSS言語（ページレイアウトや色・テキストデザインを整えるプログラミングコード）に違いがあります。

例えば、Outlookでは「背景画像」が表示されません。そのため、Webサイトのような凝ったデザインにしすぎると、メーラーによってエラーが生じたり、レイアウトが崩れることがあるのです。

デザイン崩れを防ぐため、なるべくシンプルな装飾を心がけましょう。また、テスト配信を行い、不備がないかチェックすることも有効です。

■合わせてよく読まれている資料：効果的なメールの書き方や送り方をまとめました！→成約につなげるためのメールマーケティングの基礎

HTMLメールを作るとき必要なのが、さまざまな事前準備です。ここでは、全体の構成を大まかに説明します。

DOCTYPE宣言とは、「文書型宣言」を指す言葉です。HTMLにはさまざまなバージョンやルールがあり、以下の内容を明確にする必要があります。

どの種類・ルールでメールを作るか、プログラミングに書き出し、システムに宣言することからHTMLメール作りが始まります。

テーブルレイアウトとは、テーブル（表）を作るためのコードです。、、など、さまざまなタグや要素・属性を使い、メールを構成します。

タグでメール（テーブル・表）の枠組みを作り、タグで横方向（行）を作る。そして、タグのなかにタグを記述して、行に適応させたい内容を入れる流れです。

HTMLコードの意味をまとめる区切りが「タグ」です。例えば、

メルマガの作り方

の【 と 】部分が、タグになります。タグに挟まれている「メルマガの作り方」はタグに含まれません。

「要素」はタグの中身を指しています。例えば、

メルマガの作り方

の「HTML要素」部分は、【メルマガの作り方】です。「要素」は、タグの中身全部を示すときに使われます。

HTMLタグの後ろに、半角スペースで空間を空けたあとに書くコードが「属性」です。タグや要素に、補足情報を付け加える部品の役割を担っています。例えば、

メルマガの作り方

の「HTML属性」は、【class】の部分。「class属性」と呼びます。

このような項目を使って、メールのデザインを行っていきます。

HTMLメールは基本的にテーブルレイアウトを用います。2000年代後半までWebサイトを作成するときもよく使われていましたが、現在ではCSSレイアウトが主流です。

メールの場合は、メーラーの処理能力が技術に追いついていないなどの課題があるため、テーブルレイアウトをメインに、装飾を加えたい部分にCSSを使うのが主流になっています。

CSSは、HTMLメール内のレイアウトや色・文字デザインを整える役割を持つプログラミングコードです。

埋め込み式・インライン式・外部読み込み式の3種類があり、HTMLメールに一番適しているのは「埋め込み式」といわれています。（2018年時点）

HTMLのタグの項目内でCSSの情報を書き出しすことでレイアウトを組みます。スマートフォンでよく使われるレスポンシブデザインに適しています。

HTMLプログラミング内に情報を直接入力するのが「インライン形式」です。

直接入力をしていくため、作成に時間がかかるデメリットがあります。うまくコンテンツが表示されないなどの問題も生じやすいため、初心者には向いていない形式だと言われています。

CSSファイルを外部で作成してHTMLへ読み込む形式が「外部読み込み」です。

メールは、ウイルスや危険なコンテンツが入り込まないように、リンクをブロックするようになっています。外部読み込みの場合、ブロックされてしまう可能性もあるため、メールでの使用はおすすめしません。

メールは大きくわけて9つの構成要素でできています。